<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: xyz
  Date: 2022/3/10
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="${pageContext.request.contextPath}/css/shoppingDetails.css" rel="stylesheet">
    <link rel="stylesheet" href="../dist/layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <link href="${pageContext.request.contextPath}/css/indexLxy.css" type="text/css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <title>商品详情</title>
</head>
<body>
<div class="detail_main">

  <jsp:include page="../navigation/navigation.jsp"/>

    <!--      路径-->
    <div class="detail-road">
        <ul>
            <li>
                <select>
                    <option>${vo.product.productType}</option>
                </select>
            </li>
            <li>
                <span> > </span>
            </li>
            <li>
                <select>
                    <option>${vo.product.productSupportAge}岁的宠物</option>
                </select>
            </li>
            <li>
                <span> > </span>
            </li>
            <li>
                <span> 商品详情 </span>
            </li>
        </ul>
    </div>
    <!--      商品详情-->
    <div class="detail-main">
        <div class="detail-pic">
<%--            <div>${vo.product.productPicId}</div>--%>
            <img class="detail_picture" src="https://img2.epetbar.com/common/upload/commonfile/2021/010/31/212053_75176.jpg">
        </div>
        <div class="detail-mid">
            <h6 style="padding-left: 100px;font-size: 20px;line-height: 50px">${vo.product.productName}</h6>
            <div class="mid-country"><img src="../images/CA.png"></div>
            <div class="detail-mid-c">
                <div class="mid-c-size">
                    <label class="text-justify">波奇价(元):<span class="span-justify"></span></label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="font-size: 18px;line-height: 30px;color: orangered">${vo.product.productPrice}</span>
                </div>
                <div class="mid-c-size">
                    <label class="text-justify">详细信息:<span class="span-justify"></span></label>
                    &nbsp;
                    <span >${vo.product.productMsg}</span>
                </div>
                <div class="mid-discount-size">
                    <label class="text-justify">促销信息:<span class="span-justify"></span></label>
                    &nbsp;
                    <div class="discount-mid">
                        <div class="discount-mid-zj">
                            <span class="discount-c">直降</span>
                            <span class="discount-msg">已优惠￥197.5</span>
                        </div>
                        <div class="discount-mid-mj">
                            <span class="discount-c">满赠兑换券</span>
                            <span class="discount-msg">单笔订单满199元送怡亲零食兑换券，每人最多获得1次，赠完为止</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-t-c-b">
                <div class="detail-t-c-b-size">
                    <label class="text-justify">配送至:<span class="span-justify"></span></label>
                    <div class="receiving-address">
                        <select  onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=1" onchange="this.size=1" >
                            <option value="">北京</option>
                            <option value="1">天津</option>
                            <option value="2">河北</option>
                            <option value="3">山西</option>
                            <option value="4">内蒙古</option>
                            <option value="5">辽宁</option>
                            <option value="6">吉林</option>
                            <option value="7">黑龙江</option>
                            <option value="8">上海</option>
                            <option value="9">江苏</option>
                            <option value="10">浙江</option>
                            <option value="11">安徽</option>
                            <option value="12">福建</option>
                            <option value="13">江西</option>
                            <option value="14">山东</option>
                            <option value="15">河南</option>
                            <option value="16">湖北</option>
                            <option value="17">湖南</option>
                            <option value="18">广东</option>
                        </select>
                    </div>
                    <span class="s1">有货;</span>
                    <span class="s2">支持使用优惠券</span>
                </div>
                <div class="detail-t-c-b-size">
                    <label class="text-justify" style="margin-right: 40px">购买数量:<span class="span-justify"></span></label>
                    <span class="num-c">-</span>
                    <input class="number-c">
                    <span class="num-c">+</span>
                </div>
            </div>
            <div class="detail-but">
                <input class="buy" type="button" value="立即购买">
                <input class="putin" type="button" value="加入购物车">
                <a href="${pageContext.request.contextPath}/product/${vo.product.productId}/review">
                    <input class="collection" type="button" value="写评论">
                </a>
            </div>

        </div>
        <div class="detail-right">
        </div>

    </div>
</div>

<div class="comments_main">
<%--    标签选框   --%>
    <div class="comment_tops">
        <div class="comment_head">
            <a class="label">评论：</a>
        </div>
        <div class="comment_top">
            <a class="label">全部(${vo.reviewProduct.values().size()})</a>
        </div>
        <div class="comment_top">
            <a class="label">好评(76)</a>
        </div>
        <div class="comment_top">
            <a class="label">差评(76)</a>
        </div>
    </div>

<%--    用户评论信息  --%>
    <ul class="comment_bg">
        <c:forEach var="map" items="${vo.reviewProduct}">
        <li class="comment">
            <div class="user_msg">
<%--                ${pageContext.request.contextPath}--%>
                <img class="user_pic" src="${map.value.custumerImg}">
            </div>
            <div class="comment_info">
                <h6 class="comment_name">${map.value.custumerName}</h6>
                <h6 class="comment_time">
                        <fmt:formatDate value="${map.key.commentTime}" pattern="yyyy-MM-dd HH:mm"/>
                </h6>
            </div>
            <div class="comment_msg">
                <p>${map.key.commentContent}</p>
            </div>
            <div class="comment_pics">
                <img class="comment_pic" src="${pageContext.request.contextPath}/images/shoppingcar1.png"/>
                <img class="comment_pic" src="${pageContext.request.contextPath}/images/shoppingcar1.png"/>
                <img class="comment_pic" src="${pageContext.request.contextPath}/images/shoppingcar1.png"/>
            </div>
        </li>
        </c:forEach>
    </ul>
    <%--        分页的部分 --%>
    <div class="comment_total">
<%--        <div class="comment_pro">&lt;&lt;</div>--%>
<%--        <div class="comment_now">当前第${vo.reviewProduct.size()/3}页</div>--%>
<%--        <div class="comment_next">&gt;&gt;</div>--%>
    </div>
</div>

<script src="../dist/layui/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/shoppong-details.js"></script>
</body>
</html>
